<!-- 文章详情 -->
<template>
    <div>
        <czh-detailtop />
        <div class="container maginBottom" id="detail">
            <el-row :gutter="30">
                <el-col :sm="24" :md="16" style="transition:all .5s ease-out;margin-bottom:30px;">
                    <czh-articleDetail></czh-articleDetail>
                    <czh-comment></czh-comment>
                </el-col>
                <el-col id="myElement" :sm="24" :md="8" :style="windowswidth > 990 && scrollDistance > 360 ? fixedcol : ''">
                    <czh-rightlist></czh-rightlist>
                </el-col>
            </el-row>
        </div>
        <czh_footer/>
    </div>
</template>

<script>
import detailtop from '../components/detailtop.vue'
import rightlist from '../components/rightlist.vue'
import articleDetail from '../components/articleDetail.vue'
import comment from '../components/comment.vue'
import  footer  from '../components/footer.vue'
export default {
    name: 'DetailShare',
    data() { //选项 / 数据
        return {
            scrollDistance: 0,
            position: 'fixed',
            top: 0,
            left: 0,
            width: 0,
        }
    },
    computed: {
        windowswidth() {
            return window.innerWidth
        },
        fixedcol() {
            return {
                position: this.position,
                top: '-20px',
                left: this.left + 'px',
                width: this.width + 'px',
            }
        }
    },
    methods: { //事件处理器
        handleScroll() {
            this.scrollDistance = window.scrollY;
        },
    },
    beforeDestroy() {
        window.removeEventListener('scroll', this.handleScroll);
    },
    components: { //定义组件
        'czh-articleDetail': articleDetail,
        'czh-comment': comment,
        'czh-rightlist': rightlist,
        'czh-detailtop': detailtop,
        'czh_footer':footer
    },
    created() { //生命周期函数

    },
    mounted() {
        var anchor = document.querySelector("#detail");
        // console.log(anchor,anchor.offsetTop);
        var top = anchor.offsetTop - 60;
        document.body.scrollTop = top;
        // Firefox
        document.documentElement.scrollTop = top;
        // Safari
        window.pageYOffset = top;
        window.addEventListener('scroll', this.handleScroll);
        //获取元素的宽度和距离左边的距离
        const element = document.getElementById('myElement');
        if (element) {
            const rect = element.getBoundingClientRect();
            this.left = rect.left+30;
            this.width = rect.width;
            console.log(this.left, this.width);
        }
    }
}
</script>

<style></style>
